<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
	</head>
	<body>
		<div id="d1">
			<h1>{{value}}</h1>
			<template>
			  <!-- clearable用于可将选择器清空。需要注意的是，clearable属性仅适用于单选。 -->
			  <!-- 会自动将当前被选中的el-option的 value 属性值赋值给 v-model ，作为最终下拉框的值 -->
			  <el-select v-model="value" clearable placeholder="请选择"  @change="handleCommand">
				<!--label是给用户看的  value是选中后得到的内容-->  
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
				  <span style="float: left;">{{item.label}}</span>
				  <span style="float: right;color: #8492a6; font-size: 13px">{{item.value}}</span>
			    </el-option>
			  </el-select>
			</template>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<!-- import JavaScript -->
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		let v=new Vue({
			el: "#d1",
			data:function(){
				return{
					options: [
						{label: '张三',
						value: 'zs'}, //这里的value对应每个菜单项的值
						{label: '李四',
						value: 'ls'}
					],
					value: ''  //这个valueS对应整个下拉框最终选择的值
				}
			},
			methods:{
				handleCommand(command){
					v.$message("价格:"+ command);
					v.info=command;
				}
			}
		});
	</script>
</html>
